<template>
  <div>
    <slider-captcha
      v-model="visible"
      :options="options"
      :loading="loading"
      refreshText="刷新"
      @check="check"
      @close="close"
      @refresh="getSliderOptions"
      @error="getSliderOptions"
    >
<!--      <template #errorText>-->
<!--        <div align="center" style="background: #e8d0d0; color: #be3939;">-->
<!--          <span>图像匹配错误，请您重新尝试</span>-->
<!--        </div>-->
<!--      </template>-->
      <!-- vue2 -->
      <div slot="title" class="slider-tip">安全验证</div>
      <div slot="successText" class="slider-tip success">验证成功</div>
      <div slot="errorText" class="slider-tip error">图像匹配错误，请您重新尝试</div>
      <div slot="tips" class="slider-tip">拖动下方滑块完成拼图</div>
      <!-- <span slot="question">自定义提示</span> -->
      <!-- vue2 -->

    </slider-captcha>
  </div>
</template>

<script>
export default {
  name: "MySliderCaptcha",
  data: function () {
    return {
      options: {},
      loading: false,
      visible: false,
      eventType: '',
      callback: ()=>{},
    }
  },
  destroyed () {
    this.bus.$off('CurrLanguageUpdate')
  },
  mounted () {
    this.bus.$on('CurrLanguageUpdate',()=>{
      this.$forceUpdate()
    })
    this.bus.$on('MySliderCaptchaCallBus', (eventType,callback) => {
      this.open(eventType,callback)
    })
  },
  methods: {
    // 打开触发
    open(eventType,callback) {
      this.eventType = eventType
      this.callback = callback
      this.visible = true
      this.getSliderOptions()
    },
    check: function (sliderKey, sliderX, done, error) {
      // this.loading = true
      this.MyRequest(this.ApiDoNameAuth + 'Public/slider_captcha_check', {
        eventType: this.eventType,
        sliderX: Math.ceil(sliderX),
      }, (data) => {
        // this.$message.success(this.getText('验证通过'))
        this.visible = false
        this.callback(sliderX)
        // this.$message.success('验证成功')
        done()
        // this.loading = false
      }, () => {
        error()
        // this.$message.error("检查滑动验证码 错误。。。")
      })
      /*// 这里应该是验证是否成功的接口
      if (sliderX > 208 - 5 && sliderX < 208 + 5) {
        // 验证成功
        this.$message.success('验证成功')
        done()
      } else {
        // 验证错误
        error()
      }*/
    },
    close: function () {

    },
    getSliderOptions: function () {
      this.loading = true
      this.MyRequest(this.ApiDoNameAuth + 'Public/slider_captcha_generate', {
        eventType: this.eventType
      }, (data) => {
        this.options = {
          sliderImg: data.sliderImg,
          sliderKey: data.sliderKey,
          sliderY: Math.ceil(data.sliderY)
        }
        this.loading = false
      }, () => {
        // this.$message.error("加载滑动验证码 错误。。。")
      })
    },
  }
}
</script>

<style>
  *.slider-tip{ font-size: 13px; text-align: left; text-indent: 10px;}
  *.slider-tip.error{ color: red;}
  *.slider-tip.success{ color: green;}
  *.lang-icon-close{ font-style: normal;}
  /**.lang-tips img:nth-child(1){ display: none}*/
</style>
